<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>HTML5与CSS3</title>
		<style type="text/css">
			body{
				margin: 0px;	
			}
			.test{
				background-color: red;
				width: 200px;
				height: 40px;
				position: absolute;
				top: 0;
				left: 0;
				transform: rotate(0deg);
				box-shadow: 5px 5px 5px green;
				transform: rotateX(0deg);
				font-size: 40px;
				font-weight: bold;
				animation: testAnim 5s;			
			}
			@keyframes testAnim{
				0% {background-color: red;}
				25% {background-color: yellow;left: 500px;top: 0px;}
				50% {background-color: green;left: 500px;top: 300px;}
				75% {background-color: pink;left: 0px;top: 300px;}
				100% {background-color: red;left: 0px;top: 0px;}
			}
			
			.loading{
				width: 100%;
				height: 100%;
				background-color: #000;
				opacity: 0.5;
				position: absolute;
				z-index: 3;
			}
			.loading1{
				width: 300px;
				height: 200px;
				position: absolute;
				top: 50%;
				right: 50%;
				margin-top: -100px;
				margin-right: -150px;
				background-color: #fff;
				text-align: center;
			}
			.loading1 img{
				width: 100px;
				height: 100px;
				position: absolute;
				top: 50%;
				right: 50%;
				margin-top: -50px;
				margin-right: -50px;
				border-radius: 50px;
				animation: imgrun 3s linear infinite;
			}
			@keyframes imgrun{
				100%{transform: rotate(360deg);}
			}
		</style>
	</head>
	<body>
		
		<div class="test">陈晓飞</div>
		
		<div class="loading">
			<div class="loading1">
				<img src="img/loading.jpg"/>
			</div>
		</div>
		
	</body>
</html>
